<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>视差滚动</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			::-webkit-scrollbar {
				display: none;
			}
			.container {
				width: 100vw;
				height: auto;
			}
			section {
				height: 100vh;
				background: #c4cbcf;
				color: #fff;
				font-size: 20vh;
				display: flex;
				justify-content: center;
				align-items: center;
				overflow: hidden;
			}
			.img {
				/* overflow: hidden; */
				width: 100vw;
				background-repeat: no-repeat;
				background-size: cover;
			}
			.img1 {
				background: url(../images/1.jpg);
				background-size: cover;
			}
			.img2 {
				background: url(../images/3.jpg);
				background-size: cover;
			}
			.img3 {
				background: url(../images/6.jpg);
				background-size: cover;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<section class="img img1">img1</section>
			<section class="container1">con1</section>
			<section class="img img2">img2</section>
			<section class="container2">con2</section>
			<section class="img img3">img3</section>
			<section class="container3">con3</section>
		</div>
	</body>
</html>
